<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EPMS2 - O</title>
    <style>
          #loader-wrapper {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 999999;
          }

          #loader {
              display: block;
              position: relative;
              left: 50%;
              top: 50%;
              width: 120px;
              height: 120px;
              margin: -35px 0 0 -65px;
              border-radius: 50%;
              z-index: 1001;
          }

          .loader1 {
              text-align: center;
              /*margin: 5px;*/
              border-radius: 50%;
              border: 4px solid #253147;
              display: flex;
              flex-flow: column wrap;
              justify-content: center;
              align-content: center;
              align-items: center;
              transform-style: preserve-3d;
              position: relative;
          }

          .loader-inner-1 {
              animation-delay: 0.2s;
              animation: change_first_circle 2s ease-in-out infinite;
          }

          .loader-inner-2 {
              animation-delay: 0.2s;
              animation: change_second_circle 2s ease-in-out infinite;
          }

          .loader-inner-3 {
              animation-delay: 0.2s;
              width: 100px;
              height: 100px;
              animation: change_last_circle 3s linear infinite;
          }


          #loader-wrapper .loader-section {
              position: fixed;
              top: 0;
              width: 51%;
              height: 100%;
              //background: #49a9ee;
              background: #c0bade;
              /* Old browsers */
              z-index: 1000;
              -webkit-transform: translateX(0);
              /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: translateX(0);
              /* IE 9 */
              transform: translateX(0);
              /* Firefox 16+, IE 10+, Opera */
          }

          #loader-wrapper .loader-section.section-left {
              left: 0;
          }

          #loader-wrapper .loader-section.section-right {
              right: 0;
          }

          #loader-wrapper .load_title {
              font-family: 'Open Sans';
              //color: #FFF;
              color: #253147;
              font-size: 20px;
              width: 100%;
              text-align: center;
              z-index: 9999999999999;
              position: absolute;
              top: 60%;
              opacity: 1;
              line-height: 30px;
          }

          #loader-wrapper .load_title span {
              font-weight: normal;
              font-style: italic;
              font-size: 14px;
              color: #FFF;
              opacity: 0.5;
          }

          @keyframes change_first_circle {
              50% {
                  transform: rotateX(360deg) scale(0.8);
              }
          }

          @keyframes change_second_circle {
              50% {
                  transform: rotateY(360deg) scale(0.8);
              }
          }

          @keyframes change_last_circle {
              50% {
                  transform: rotateX(360deg) scale(0.8);
              }
          }
      </style>
  </head>
  <body>
    <div id="app" class="h-full">
        <div id="loader-wrapper">
            <div id="loader">
                <div class="loader1 loader-inner-1">
                    <div class="loader1 loader-inner-2">
                        <div class="loader1 loader-inner-3"></div>
                    </div>
                </div>
            </div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
            <div class="load_title">系统加载中,请稍后...</div>
        </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
